<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>室内停车场管理系统</title>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <style type="text/css">
        body {
            color: whitesmoke;
        }

        span {
            color: red;
        }

        .out-div {
            padding: 15px;
            width: 500px;
            margin-left: 220px;
            margin-top: 150px;
        }

        .prompt-information {
            font-size: 10px;
            color: orangered;
            float: right;
            margin-right: 10px;
        }
    </style>
</head>

<body th:background="@{/images/background-img.jpeg}">
<div class="layui-layout layui-layout-admin">
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="out-div">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input id="username" type="text" name="username" required lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input id="email" type="text" name="email" required lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div id="prompt_message" class="prompt-information">

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline layui-col-md3">
                        <input id="code" type="text" name="code" required lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                    <button type="button" id="getCode" class="layui-btn layui-col-md4" style="margin-left: 16px">获取验证码
                    </button>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新密码</label>
                    <div class="layui-input-block">
                        <input id="password" type="password" name="password" required lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button id="resetBtn" type="button" class="layui-btn layui-btn-fluid">修改密码</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div th:replace="common/commonElement :: jsFile"></div>
<script th:inline="javascript" type="text/javascript">
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;

    });

    layui.use('layer', function () {
        var layer = layui.layer;
    });

    // 获取项目路径
    var projectPath = [[${#httpServletRequest.getContextPath()}]];


    // 获取 获取验证码 按钮
    var getCodeBtn = document.getElementById("getCode");

    // 给 获取验证码 按钮绑定单击响应事件
    getCodeBtn.onclick = function () {
        // 验证用户名和邮箱
        var username = document.getElementById("username").value;
        var email = document.getElementById("email").value;
        console.log(username);
        console.log(email);
        // ajx
        var xhr = new XMLHttpRequest();
        var url = projectPath + "/admin/selectByUsernameAndEmail?" + "username=" + username + "&email=" + email;
        xhr.open("get", url);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var responseText = xhr.responseText;
                if (responseText == "true") {
                    // 请求后台发送验证码
                    // ajx
                    url = projectPath + "/admin/sendCode?username=" + username + "&email=" + email;
                    xhr.open("get", url);
                    xhr.send();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            responseText = xhr.responseText;
                            if (responseText == "true") {
                                // 倒计时
                                var time = 60;
                                var timer = setInterval(function () {
                                    // 将按钮变成不可点击状态
                                    getCodeBtn.className = "layui-btn layui-col-md4 layui-btn-disabled";
                                    // 显示倒计时
                                    var prompt_message = document.getElementById("prompt_message");
                                    prompt_message.innerText = "验证码已发送到您的邮箱，" + time-- + "秒后重新发送";
                                    if (time <= 0) {
                                        clearInterval(timer);
                                        prompt_message.innerText = "";
                                        getCodeBtn.className = "layui-btn layui-col-md4";
                                    }
                                }, 1000);
                            } else {
                                layer.open({
                                    title: '用户名或邮箱不存在'
                                    , content: '<span>用户名或邮箱不存在，请重新输入！</span>'
                                });
                            }
                        }
                    }
                } else {
                    layer.open({
                        title: '用户名或邮箱不存在'
                        , content: '<span>用户名或邮箱不存在，请重新输入！</span>'
                    });
                }
            }
        }
    };

    document.getElementById("resetBtn").onclick = function () {
        var username = document.getElementById("username").value;
        var email = document.getElementById("email").value;
        var code = document.getElementById("code").value;
        var password = document.getElementById("password").value;

        // ajx
        var xhr = new XMLHttpRequest();
        var url = projectPath + "/admin/resetPassword?" + "username=" + username + "&email=" + email + "&code=" + code + "&password=" + password;
        xhr.open("post", url);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var responseText = xhr.responseText;
                if (responseText == "true") {
                    layer.open({
                        title: '密码修改成功'
                        , content: '<span>密码修改成功，3秒后自动跳转到登陆界面</span>'
                        , time: 3000
                        , end: function () {
                            window.location.href = projectPath + "/admin/toLogin";
                        }
                    });
                } else {
                    layer.open({
                        title: '密码修改失败'
                        , content: '<span>请检查用户名、邮箱、验证码是否输入正确！</span>'
                    });
                }
            }
        }
    }

</script>
</body>
</html>